<template>
    <div>
        <DesignerView :data="viewData.results" @save="save" v-loading="viewData.loading" />
    </div>
</template>

<script lang="ts" setup>
import type { IChannelModelField } from '@/model'
import DesignerView from '@/components/designer/index.vue'
import { useRoute } from 'vue-router'
import { onMounted, reactive } from 'vue'
import { system } from '@/api'
import { error } from '@/utils'

const route = useRoute()
const viewData = reactive<{
    loading: boolean
    id: number
    results: IChannelModelField[]
}>({
    loading: false,
    id: route.params.id as any,
    results: [],
})

const save = (data: any) => {
    system
        .saveModelFields(data, viewData.id)
        .then(() => {
            location.reload()
        })
        .catch((res) => {
            error(res.data.message)
        })
}

const loadData = async () => {
    viewData.loading = true
    viewData.results.length = 0
    try {
        const res = await system.getModelFields(viewData.id as any)
        if (res.data!.length > 0) {
            viewData.results = res.data!
        }
    } catch (e) {}
    viewData.loading = false
}

onMounted(() => {
    loadData()
})
</script>

<style scoped lang="scss"></style>
